import { useState, useEffect } from 'react'
import { message, Image } from 'antd';
import { LeftOutlined, ShareAltOutlined } from '@ant-design/icons';
import './index.css'
import './index.css'
import { useNavigate, useLocation } from 'react-router-dom';
import { marked } from 'marked'
import Editor from 'for-editor'
import hljs from "highlight.js";
import { gethtml, pofollow } from '../../plugins/getlogin'
export const Details = () => {
    const router = useNavigate()
    const location = useLocation()
    const { state } = location
    // 配置marked
    let renderer = new marked.Renderer();
    marked.setOptions({
        renderer: renderer,
        highlight: function (code, lang) {
            const language = hljs.getLanguage(lang) ? lang : 'plaintext';
            return hljs.highlight(code, { language }).value;
        },
        langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
        pedantic: false,
        gfm: true,
        breaks: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        xhtml: false
    });
    const [mdContent, setMdContent] = useState('')
    function handleEditorChange(value) {
        setMdContent(value)
    }
    const [titles, settitles] = useState([]);
    const [showt, setshowt] = useState(false);
    useEffect(() => {
        var time = { id: state.title }
        gethtml(time).then(e => {
            settitles(e.data)
            setMdContent(e.data.area)
        })
        //自动触发展示markdown
        var yyy = document.querySelector("#root > div > div > div > div.footerart > div > div.for-toolbar > ul:nth-child(2) > li:nth-child(2) > i")
        yyy.click();
    }, []);

    const resent = () => {
        var shows = { title: titles.name, show: showt }

        if (showt) { setshowt(false); message.warning('期待你的关注！'); pofollow(shows) }
        else {
            setshowt(true); message.success('感谢你的关注！'); pofollow(shows)
        }
    }
    const backartile = () => {
        router(-1)
    }
    var list = {
        width: '4rem',
        height: '4rem',
        borderRadius: '50%'
    }
    var qq = {
        width: '5rem',
        height: '5rem',
        borderRadius: '50%'
    }
    var _title, _source, _sourceUrl, _pic, _showcount, _desc, _summary, _site,
        _url = 'http://www.baidu.com'

    function shareToqq(event) {
        event.preventDefault();
        var _shareUrl = 'https://connect.qq.com/widget/shareqq/iframe_index.html?';
        _shareUrl += 'url=' + encodeURIComponent(_url || location.href);   //分享的链接
        _shareUrl += '&title=' + encodeURIComponent(_title || document.title);     //分享的标题
        window.open(_shareUrl, '_blank');
    }
    //分享到qq空间
    function shareToQzone(event) {
        event.preventDefault();
        var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
        _shareUrl += 'url=' + encodeURIComponent(_url || document.location);   //参数url设置分享的内容链接|默认当前页location
        _shareUrl += '&showcount=' + _showcount || 0;      //参数showcount是否显示分享总数,显示：'1'，不显示：'0'，默认不显示
        _shareUrl += '&desc=' + encodeURIComponent(_desc || '分享的描述');    //参数desc设置分享的描述，可选参数
        _shareUrl += '&summary=' + encodeURIComponent(_summary || '分享摘要');    //参数summary设置分享摘要，可选参数
        _shareUrl += '&title=' + encodeURIComponent(_title || document.title);    //参数title设置分享标题，可选参数
        _shareUrl += '&site=' + encodeURIComponent(_site || '');   //参数site设置分享来源，可选参数
        _shareUrl += '&pics=' + encodeURIComponent(_pic || '');   //参数pics设置分享图片的路径，多张图片以＂|＂隔开，可选参数
        window.open(_shareUrl, '_blank');
    }
    //分享到百度贴吧
    function shareToTieba(event) {
        event.preventDefault();
        var _shareUrl = 'http://tieba.baidu.com/f/commit/share/openShareApi?';
        _shareUrl += 'title=' + encodeURIComponent(_title || document.title);  //分享的标题
        _shareUrl += '&url=' + encodeURIComponent(_url || document.location);  //分享的链接
        _shareUrl += '&pic=' + encodeURIComponent(_pic || '');    //分享的图片
        window.open(_shareUrl, '_blank');
    }
    function shareToRenren(event) {
        event.preventDefault();
        var _shareUrl = 'http://widget.renren.com/dialog/share?';
        _shareUrl += 'link=' + encodeURIComponent(_url || location.href);   //分享的链接
        _shareUrl += '&title=' + encodeURIComponent(_title || document.title);     //分享的标题
        window.open(_shareUrl, '_blank');
    }
    var time = true
    const share = () => {
        var m = document.querySelector('.qq');
        if (time) {
            m.style.visibility = 'visible'; time = false
        }
        else {
            m.style.visibility = 'hidden'; time = true

        }
    }
    const cnage = () => {
        var m = document.querySelector('.qq');
        m.style.visibility = 'hidden';
    }
    return (
        <div>
            <div className='detal'>
                <LeftOutlined onClick={backartile} style={{ fontSize: '2rem' }} />
                <ShareAltOutlined style={{ fontSize: '2rem' }} onClick={share} />
            </div>
            <div className='titlearea'>{titles.title}
            </div>
            <div className='allcontainer'>
                <div className='leftart'>  <Image
                    style={list}
                    src={titles.header}
                />{titles.name} </div>
                <div className='conterart'><div>{titles.adress}</div><div>{titles.time}</div></div>
                <div className='rightart'><button className='kode' onClick={resent}>{showt === true ? '已关注' : '关注+'}</button></div>
            </div>

            <div className='footerart'>
                <Editor value={mdContent} onChange={handleEditorChange} />
            </div>

            <div className='qq'>

                <a title="分享到QQ好友" class="share_qq" onClick={(event) => { shareToqq(event) }}>
                    <img src="https://img2.baidu.com/it/u=3955163670,555546506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" style={qq} />
                </a>
                <a title="分享到QQ空间" class="share_qzone" onClick={(event) => { shareToQzone(event) }}>
                    <img src="https://img0.baidu.com/it/u=2719522696,188056225&fm=253&fmt=auto&app=138&f=JPG?w=256&h=256" style={qq} />
                </a>
                <a title="分享到百度贴吧" href="javascript:void(0)" class="share_bdtb" onClick={(event) => { shareToTieba(event) }}>
                    <img src="https://img2.baidu.com/it/u=3805818121,3106825933&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474" style={qq} />
                </a>
                <a title="分享到人人网" href="javascript:void(0)" class="share_rrw" onClick={(event) => { shareToRenren(event) }}>
                    <img src="https://img0.baidu.com/it/u=1547235672,91787756&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260" style={qq} />
                </a>
                <p className='cuo' onClick={cnage}>X</p>
            </div>
        </div>
    )
}